<template>
	<div class="com-container">
		<div class="com-chart" ref='rank_ref'></div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				//实例对象
				chartInstance: null,
				// 服务器返回的数据，数组格式
				resData: null,
				// 区域缩放的起点值
				startValue: 0,
				//区域缩放的终点值
				endValue: 9,
				// 定时器的标识
				timerId: null
			}
		},
		computed:{
			theme(){
				 return this.$store.state.theme;
			}
		},
		watch:{
			theme(){
				//销毁当前图表
				this.chartInstance.dispose();
				//重新以最新主题初始化图表
				this.initChart();
				//完成适配
				this.screenAdapter();
				//更新图表展示
				this.updataChart();			
			}
		},
		created(){
			//组件创建完成后进行回调函数的注册
			this.$socket.registerCallBack('rankData',this.getData)		
		},
		
		mounted() {
			this.initChart();
			//this.getData();
			this.$socket.send({
				action: 'getData',
				socketType: 'rankData',
				chartName: 'rank',
				value: ''
			})
			this.screenAdapter();
			window.addEventListener("resize", this.screenAdapter);
		},
		destroyed() {
			clearInterval(this.timerId);
			window.removeEventListener("resize", this.screenAdapter);
			this.$socket.unRegisterCallBack('rankData');
			
		},
		methods: {			
			//初始化echart实例对象
			initChart() {
				this.chartInstance = this.$echarts.init(this.$refs.rank_ref,this.$store.state.theme);
				//对图表初始化配置的控制
				const initOption = {
        title: {
          text: '▎ 地区销售排行',
          left: 20,
          top: 20
        },
        grid: {
          top: '25%',
          left: '5%',
          right: '5%',
          bottom: '5%',
          containLabel: true
        },
        tooltip: {
          show: true
        },
        xAxis: {
          type: 'category'
        },
        yAxis: {
          type: 'value'
        },
					
        series: [
          {
            type: 'bar',
						label: {
						  show: true,
						  position: 'top',
						  textStyle: {
						    color: '#ffffff'
						  }
						}			
          }
        ]
				};
				this.chartInstance.setOption(initOption);
				this.chartInstance.on('mouseover', () => {
					clearInterval(this.timerId);
				})
				this.chartInstance.on('mouseout', () => {
					this.startInterval();
				})
			},
			//获取服务器数据
			getData(ret) {
				// this.$axios.get('rank').then(res => {
				// 	console.log(res.data);
				// 	this.resData = res.data;
				// 	//对数据从小到大排序
				// 	this.resData.sort((a, b) => b.value - a.value);
				// 	//获取总页数
				// 	this.updataChart();
				// 	this.startInterval();
				// 	// console.log(this.currentPage)
				// })
					this.resData = ret;
					//对数据从小到大排序
					this.resData.sort((a, b) => b.value - a.value);
					//获取总页数
					this.updataChart();
					this.startInterval();
			},
			//更新图表			
			updataChart() {
				const colorArr = [
				  ['rgba(254, 33, 30, 0.5)', 'rgba(188, 254, 7, 1.0)'],
				  ['rgba(255, 170, 0, 0.5)', 'rgba(86, 142, 104, 1)'],
				  ['rgba(85, 85, 255, 0.5)', 'rgba(85, 170, 255, 1.0)']
				]
				
				const rankNames = this.resData.map(item => {
					return item.name;
				})
				// console.log(sellerNames);
				const rankValue = this.resData.map(item => {
					return item.value;
				})
				// console.log(sellerValue);
				const dataOption = {					
					xAxis: {
						data: rankNames
					},
					dataZoom: {
						show: false,
						startValue: this.startValue,
						endValue: this.endValue
					},
					series: [{
						data: rankValue,
            itemStyle: {
              color: arg => {
                let targetColorArr = null
                if (arg.value > 300) {
                  targetColorArr = colorArr[0]
                } else if (arg.value > 200) {
                  targetColorArr = colorArr[1]
                } else {
                  targetColorArr = colorArr[2]
                }
                return new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: targetColorArr[0]
                  },
                  {
                    offset: 1,
                    color: targetColorArr[1]
                  }
                ])
              }
            }
					}
					]
				}
				this.chartInstance.setOption(dataOption);
			},
			//echarts实例屏幕的适配
			screenAdapter(){
        const oneWeight = this.$refs.rank_ref.offsetWidth / 100 ;
				//跟屏幕大小有关的配置
				const adapterOption = {
        title: {
          textStyle: {
            fontSize: oneWeight * 3
          }
        },
        series: [
          {
            barWidth: oneWeight *4,
            itemStyle: {
              barBorderRadius: [oneWeight *2, oneWeight * 2, 0, 0]
            }
          }
        ]
				};
				this.chartInstance.setOption(adapterOption);
				this.chartInstance.resize();
			},
			startInterval(){
				if (this.timerId) {
				  clearInterval(this.timerId);
				}
				this.timerId = setInterval(() => {
				  this.startValue++;
				  this.endValue++;
				  if (this.endValue > this.resData.length - 1) {
				    this.startValue = 0;
				    this.endValue = 9;
				  }
				  this.updataChart();
				}, 3000)
			}
		}
	}
</script>


<style scoped>

</style>
